Color Doc

Package Name

fifthtry.github.io/color-doc

Color Doc is a color schemes which can be used to change color scheme of web packages via using FTD lang.

To use color-doc color scheme on your web package, add below into FASTN.ftd file:

-- fastn.dependency: fifthtry.github.io/color-doc as colors

Import colors into FASTN/config.ftd file.

-- import: colors

Set phasers on stun

USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.

Normal

Button

Button

Button

Hover

Button

Button

Button

Pressed

Button

Button

Button

Focused

Button

Button

Button

Beep Beep! I am an error !

close

Mission complete.

close

Warning: Borg ship Incoming!

close

All hands on deck! Captain on bridge.

close

Set phasers on stun

USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.

Normal

Button

Button

Button

Hover

Button

Button

Button

Pressed

Button

Button

Button

Focused

Button

Button

Button

Beep Beep! I am an error !

close

Mission complete.

close

Warning: Borg ship Incoming!

close

All hands on deck! Captain on bridge.

close

Set phasers on stun

USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.

Normal

Button

Button

Button

Hover

Button

Button

Button

Pressed

Button

Button

Button

Focused

Button

Button

Button

Beep Beep! I am an error !

close

Mission complete.

close

Warning: Borg ship Incoming!

close

All hands on deck! Captain on bridge.

close

Figma tokens json (old format)

Color scheme json

{
"default-colors light": {
"Accent Colors": {
    "$fpm": {
        "color": {
            "accent": {
  "primary": {
    "value": "#2dd4bf",
    "type": "color"
  },
  "secondary": {
    "value": "#4fb2df",
    "type": "color"
  },
  "tertiary": {
    "value": "#c5cbd7",
    "type": "color"
  }
}
        }
    }
},
"Background Colors": {
    "$fpm": {
        "color": {
            "main": {
                "background": {
  "base": {
    "value": "#18181b",
    "type": "color"
  },
  "code": {
    "value": "#2b303b",
    "type": "color"
  },
  "overlay": {
    "value": "rgba(0, 0, 0, 0.8)",
    "type": "color"
  },
  "step-1": {
    "value": "#141414",
    "type": "color"
  },
  "step-2": {
    "value": "#585656",
    "type": "color"
  }
}
            }
        }
    }
},
"CTA Danger Colors": {
    "$fpm": {
        "color": {
            "main": {
                "cta-danger": {
  "base": {
    "value": "#1c1b1f",
    "type": "color"
  },
  "border": {
    "value": "#1c1b1f",
    "type": "color"
  },
  "disabled": {
    "value": "#1c1b1f",
    "type": "color"
  },
  "focused": {
    "value": "#1c1b1f",
    "type": "color"
  },
  "hover": {
    "value": "#1c1b1f",
    "type": "color"
  },
  "pressed": {
    "value": "#1c1b1f",
    "type": "color"
  },
  "text": {
    "value": "#1c1b1f",
    "type": "color"
  }
}
            }
        }
    }
},
"CTA Primary Colors": {
    "$fpm": {
        "color": {
            "cta-primary": {
  "base": {
    "value": "#2dd4bf",
    "type": "color"
  },
  "border": {
    "value": "#2b8074",
    "type": "color"
  },
  "disabled": {
    "value": "rgba(44, 201, 181, 0.1)",
    "type": "color"
  },
  "focused": {
    "value": "#2cbfac",
    "type": "color"
  },
  "hover": {
    "value": "#2c9f90",
    "type": "color"
  },
  "pressed": {
    "value": "#2cc9b5",
    "type": "color"
  },
  "text": {
    "value": "#feffff",
    "type": "color"
  }
}
        }
    }
},
"CTA Secondary Color": {
    "$fpm": {
        "color": {
            "cta-secondary": {
  "base": {
    "value": "#4fb2df",
    "type": "color"
  },
  "border": {
    "value": "#209fdb",
    "type": "color"
  },
  "disabled": {
    "value": "rgba(79, 178, 223, 0.1)",
    "type": "color"
  },
  "focused": {
    "value": "#4fb1df",
    "type": "color"
  },
  "hover": {
    "value": "#40afe1",
    "type": "color"
  },
  "pressed": {
    "value": "#4fb2df",
    "type": "color"
  },
  "text": {
    "value": "#ffffff",
    "type": "color"
  }
}
        }
    }
},
"CTA Tertiary Colors": {
    "$fpm": {
        "color": {
            "main": {
                "cta-tertiary": {
  "base": {
    "value": "#556375",
    "type": "color"
  },
  "border": {
    "value": "#e2e4e7",
    "type": "color"
  },
  "disabled": {
    "value": "rgba(85, 99, 117, 0.1)",
    "type": "color"
  },
  "focused": {
    "value": "#e0e2e6",
    "type": "color"
  },
  "hover": {
    "value": "#c7cbd1",
    "type": "color"
  },
  "pressed": {
    "value": "#3b4047",
    "type": "color"
  },
  "text": {
    "value": "#ffffff",
    "type": "color"
  }
}
            }
        }
    }
},
"Custom Colors": {
    "$fpm": {
        "color": {
            "main": {
                "custom": {
  "eight": {
    "value": "#d554b3",
    "type": "color"
  },
  "five": {
    "value": "#eb57be",
    "type": "color"
  },
  "four": {
    "value": "#7a65c7",
    "type": "color"
  },
  "nine": {
    "value": "#ec8943",
    "type": "color"
  },
  "one": {
    "value": "#ed753a",
    "type": "color"
  },
  "seven": {
    "value": "#7564be",
    "type": "color"
  },
  "six": {
    "value": "#ef8dd6",
    "type": "color"
  },
  "ten": {
    "value": "#da7a4a",
    "type": "color"
  },
  "three": {
    "value": "#8fdcf8",
    "type": "color"
  },
  "two": {
    "value": "#f3db5f",
    "type": "color"
  }
}
            }
        }
    }
},
"Error Colors": {
    "$fpm": {
        "color": {
            "main": {
                "error": {
  "base": {
    "value": "#f5bdbb",
    "type": "color"
  },
  "border": {
    "value": "#df2b2b",
    "type": "color"
  },
  "text": {
    "value": "#c62a21",
    "type": "color"
  }
}
            }
        }
    }
},
"Info Colors": {
    "$fpm": {
        "color": {
            "main": {
                "info": {
  "base": {
    "value": "#c4edfd",
    "type": "color"
  },
  "border": {
    "value": "#205694",
    "type": "color"
  },
  "text": {
    "value": "#205694",
    "type": "color"
  }
}
            }
        }
    }
},
"Standalone Colors": {
    "$fpm": {
        "color": {
            "main": {
  "border": {
    "value": "#434547",
    "type": "color"
  },
  "border-strong": {
    "value": "#919192",
    "type": "color"
  },
  "scrim": {
    "value": "#007f9b",
    "type": "color"
  },
  "shadow": {
    "value": "#007f9b",
    "type": "color"
  },
  "text": {
    "value": "#a8a29e",
    "type": "color"
  },
  "text-strong": {
    "value": "#ffffff",
    "type": "color"
  }
}
        }
    }
},
"Success Colors": {
    "$fpm": {
        "color": {
            "main": {
                "success": {
  "base": {
    "value": "#e3f0c4",
    "type": "color"
  },
  "border": {
    "value": "#3d741f",
    "type": "color"
  },
  "text": {
    "value": "#467b28",
    "type": "color"
  }
}
            }
        }
    }
},
"Warning Colors": {
    "$fpm": {
        "color": {
            "main": {
                "warning": {
  "base": {
    "value": "#fbefba",
    "type": "color"
  },
  "border": {
    "value": "#966220",
    "type": "color"
  },
  "text": {
    "value": "#966220",
    "type": "color"
  }
}
            }
        }
    }
}
},
"default-colors dark": {
"Accent Colors": {
    "$fpm": {
        "color": {
            "accent": {
  "primary": {
    "value": "#2dd4bf",
    "type": "color"
  },
  "secondary": {
    "value": "#4fb2df",
    "type": "color"
  },
  "tertiary": {
    "value": "#c5cbd7",
    "type": "color"
  }
}
        }
    }
},
"Background Colors": {
    "$fpm": {
        "color": {
            "main": {
                "background": {
  "base": {
    "value": "#18181b",
    "type": "color"
  },
  "code": {
    "value": "#2b303b",
    "type": "color"
  },
  "overlay": {
    "value": "rgba(0, 0, 0, 0.8)",
    "type": "color"
  },
  "step-1": {
    "value": "#141414",
    "type": "color"
  },
  "step-2": {
    "value": "#585656",
    "type": "color"
  }
}
            }
        }
    }
},
"CTA Danger Colors": {
    "$fpm": {
        "color": {
            "main": {
                "cta-danger": {
  "base": {
    "value": "#1c1b1f",
    "type": "color"
  },
  "border": {
    "value": "#1c1b1f",
    "type": "color"
  },
  "disabled": {
    "value": "#1c1b1f",
    "type": "color"
  },
  "focused": {
    "value": "#1c1b1f",
    "type": "color"
  },
  "hover": {
    "value": "#1c1b1f",
    "type": "color"
  },
  "pressed": {
    "value": "#1c1b1f",
    "type": "color"
  },
  "text": {
    "value": "#1c1b1f",
    "type": "color"
  }
}
            }
        }
    }
},
"CTA Primary Colors": {
    "$fpm": {
        "color": {
            "cta-primary": {
  "base": {
    "value": "#2dd4bf",
    "type": "color"
  },
  "border": {
    "value": "#2b8074",
    "type": "color"
  },
  "disabled": {
    "value": "rgba(44, 201, 181, 0.1)",
    "type": "color"
  },
  "focused": {
    "value": "#2cbfac",
    "type": "color"
  },
  "hover": {
    "value": "#2c9f90",
    "type": "color"
  },
  "pressed": {
    "value": "#2cc9b5",
    "type": "color"
  },
  "text": {
    "value": "#feffff",
    "type": "color"
  }
}
        }
    }
},
"CTA Secondary Color": {
    "$fpm": {
        "color": {
            "cta-secondary": {
  "base": {
    "value": "#4fb2df",
    "type": "color"
  },
  "border": {
    "value": "#209fdb",
    "type": "color"
  },
  "disabled": {
    "value": "rgba(79, 178, 223, 0.1)",
    "type": "color"
  },
  "focused": {
    "value": "#4fb1df",
    "type": "color"
  },
  "hover": {
    "value": "#40afe1",
    "type": "color"
  },
  "pressed": {
    "value": "#4fb2df",
    "type": "color"
  },
  "text": {
    "value": "#ffffff",
    "type": "color"
  }
}
        }
    }
},
"CTA Tertiary Colors": {
    "$fpm": {
        "color": {
            "main": {
                "cta-tertiary": {
  "base": {
    "value": "#556375",
    "type": "color"
  },
  "border": {
    "value": "#e2e4e7",
    "type": "color"
  },
  "disabled": {
    "value": "rgba(85, 99, 117, 0.1)",
    "type": "color"
  },
  "focused": {
    "value": "#e0e2e6",
    "type": "color"
  },
  "hover": {
    "value": "#c7cbd1",
    "type": "color"
  },
  "pressed": {
    "value": "#3b4047",
    "type": "color"
  },
  "text": {
    "value": "#ffffff",
    "type": "color"
  }
}
            }
        }
    }
},
"Custom Colors": {
    "$fpm": {
        "color": {
            "main": {
                "custom": {
  "eight": {
    "value": "#d554b3",
    "type": "color"
  },
  "five": {
    "value": "#eb57be",
    "type": "color"
  },
  "four": {
    "value": "#7a65c7",
    "type": "color"
  },
  "nine": {
    "value": "#ec8943",
    "type": "color"
  },
  "one": {
    "value": "#ed753a",
    "type": "color"
  },
  "seven": {
    "value": "#7564be",
    "type": "color"
  },
  "six": {
    "value": "#ef8dd6",
    "type": "color"
  },
  "ten": {
    "value": "#da7a4a",
    "type": "color"
  },
  "three": {
    "value": "#8fdcf8",
    "type": "color"
  },
  "two": {
    "value": "#f3db5f",
    "type": "color"
  }
}
            }
        }
    }
},
"Error Colors": {
    "$fpm": {
        "color": {
            "main": {
                "error": {
  "base": {
    "value": "#f5bdbb",
    "type": "color"
  },
  "border": {
    "value": "#df2b2b",
    "type": "color"
  },
  "text": {
    "value": "#c62a21",
    "type": "color"
  }
}
            }
        }
    }
},
"Info Colors": {
    "$fpm": {
        "color": {
            "main": {
                "info": {
  "base": {
    "value": "#c4edfd",
    "type": "color"
  },
  "border": {
    "value": "#205694",
    "type": "color"
  },
  "text": {
    "value": "#205694",
    "type": "color"
  }
}
            }
        }
    }
},
"Standalone Colors": {
    "$fpm": {
        "color": {
            "main": {
  "border": {
    "value": "#434547",
    "type": "color"
  },
  "border-strong": {
    "value": "#919192",
    "type": "color"
  },
  "scrim": {
    "value": "#007f9b",
    "type": "color"
  },
  "shadow": {
    "value": "#007f9b",
    "type": "color"
  },
  "text": {
    "value": "#a8a29e",
    "type": "color"
  },
  "text-strong": {
    "value": "#ffffff",
    "type": "color"
  }
}
        }
    }
},
"Success Colors": {
    "$fpm": {
        "color": {
            "main": {
                "success": {
  "base": {
    "value": "#e3f0c4",
    "type": "color"
  },
  "border": {
    "value": "#3d741f",
    "type": "color"
  },
  "text": {
    "value": "#467b28",
    "type": "color"
  }
}
            }
        }
    }
},
"Warning Colors": {
    "$fpm": {
        "color": {
            "main": {
                "warning": {
  "base": {
    "value": "#fbefba",
    "type": "color"
  },
  "border": {
    "value": "#966220",
    "type": "color"
  },
  "text": {
    "value": "#966220",
    "type": "color"
  }
}
            }
        }
    }
}
}
}

Figma tokens json (new)

Figma tokens json (new format)

{
"default-colors-light": {
  "Accent Colors": {
    "primary": {
      "value": "#2dd4bf",
      "type": "color"
    },
    "secondary": {
      "value": "#4fb2df",
      "type": "color"
    },
    "tertiary": {
      "value": "#c5cbd7",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#18181b",
      "type": "color"
    },
    "code": {
      "value": "#2b303b",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#141414",
      "type": "color"
    },
    "step-2": {
      "value": "#585656",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "border": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "disabled": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "focused": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "hover": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "pressed": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "text": {
      "value": "#1c1b1f",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#2dd4bf",
      "type": "color"
    },
    "border": {
      "value": "#2b8074",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(44, 201, 181, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#2cbfac",
      "type": "color"
    },
    "hover": {
      "value": "#2c9f90",
      "type": "color"
    },
    "pressed": {
      "value": "#2cc9b5",
      "type": "color"
    },
    "text": {
      "value": "#feffff",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#4fb2df",
      "type": "color"
    },
    "border": {
      "value": "#209fdb",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(79, 178, 223, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#4fb1df",
      "type": "color"
    },
    "hover": {
      "value": "#40afe1",
      "type": "color"
    },
    "pressed": {
      "value": "#4fb2df",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#556375",
      "type": "color"
    },
    "border": {
      "value": "#e2e4e7",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(85, 99, 117, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#e0e2e6",
      "type": "color"
    },
    "hover": {
      "value": "#c7cbd1",
      "type": "color"
    },
    "pressed": {
      "value": "#3b4047",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "Custom Colors": {
    "eight": {
      "value": "#d554b3",
      "type": "color"
    },
    "five": {
      "value": "#eb57be",
      "type": "color"
    },
    "four": {
      "value": "#7a65c7",
      "type": "color"
    },
    "nine": {
      "value": "#ec8943",
      "type": "color"
    },
    "one": {
      "value": "#ed753a",
      "type": "color"
    },
    "seven": {
      "value": "#7564be",
      "type": "color"
    },
    "six": {
      "value": "#ef8dd6",
      "type": "color"
    },
    "ten": {
      "value": "#da7a4a",
      "type": "color"
    },
    "three": {
      "value": "#8fdcf8",
      "type": "color"
    },
    "two": {
      "value": "#f3db5f",
      "type": "color"
    }
  },
  "Error Colors": {
    "base": {
      "value": "#f5bdbb",
      "type": "color"
    },
    "border": {
      "value": "#df2b2b",
      "type": "color"
    },
    "text": {
      "value": "#c62a21",
      "type": "color"
    }
  },
  "Info Colors": {
    "base": {
      "value": "#c4edfd",
      "type": "color"
    },
    "border": {
      "value": "#205694",
      "type": "color"
    },
    "text": {
      "value": "#205694",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#434547",
      "type": "color"
    },
    "border-strong": {
      "value": "#919192",
      "type": "color"
    },
    "scrim": {
      "value": "#007f9b",
      "type": "color"
    },
    "shadow": {
      "value": "#007f9b",
      "type": "color"
    },
    "text": {
      "value": "#a8a29e",
      "type": "color"
    },
    "text-strong": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "Success Colors": {
    "base": {
      "value": "#e3f0c4",
      "type": "color"
    },
    "border": {
      "value": "#3d741f",
      "type": "color"
    },
    "text": {
      "value": "#467b28",
      "type": "color"
    }
  },
  "Warning Colors": {
    "base": {
      "value": "#fbefba",
      "type": "color"
    },
    "border": {
      "value": "#966220",
      "type": "color"
    },
    "text": {
      "value": "#966220",
      "type": "color"
    }
  }
},
"default-colors-dark": {
  "Accent Colors": {
    "primary": {
      "value": "#2dd4bf",
      "type": "color"
    },
    "secondary": {
      "value": "#4fb2df",
      "type": "color"
    },
    "tertiary": {
      "value": "#c5cbd7",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#18181b",
      "type": "color"
    },
    "code": {
      "value": "#2b303b",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#141414",
      "type": "color"
    },
    "step-2": {
      "value": "#585656",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "border": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "disabled": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "focused": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "hover": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "pressed": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "text": {
      "value": "#1c1b1f",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#2dd4bf",
      "type": "color"
    },
    "border": {
      "value": "#2b8074",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(44, 201, 181, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#2cbfac",
      "type": "color"
    },
    "hover": {
      "value": "#2c9f90",
      "type": "color"
    },
    "pressed": {
      "value": "#2cc9b5",
      "type": "color"
    },
    "text": {
      "value": "#feffff",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#4fb2df",
      "type": "color"
    },
    "border": {
      "value": "#209fdb",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(79, 178, 223, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#4fb1df",
      "type": "color"
    },
    "hover": {
      "value": "#40afe1",
      "type": "color"
    },
    "pressed": {
      "value": "#4fb2df",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#556375",
      "type": "color"
    },
    "border": {
      "value": "#e2e4e7",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(85, 99, 117, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#e0e2e6",
      "type": "color"
    },
    "hover": {
      "value": "#c7cbd1",
      "type": "color"
    },
    "pressed": {
      "value": "#3b4047",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "Custom Colors": {
    "eight": {
      "value": "#d554b3",
      "type": "color"
    },
    "five": {
      "value": "#eb57be",
      "type": "color"
    },
    "four": {
      "value": "#7a65c7",
      "type": "color"
    },
    "nine": {
      "value": "#ec8943",
      "type": "color"
    },
    "one": {
      "value": "#ed753a",
      "type": "color"
    },
    "seven": {
      "value": "#7564be",
      "type": "color"
    },
    "six": {
      "value": "#ef8dd6",
      "type": "color"
    },
    "ten": {
      "value": "#da7a4a",
      "type": "color"
    },
    "three": {
      "value": "#8fdcf8",
      "type": "color"
    },
    "two": {
      "value": "#f3db5f",
      "type": "color"
    }
  },
  "Error Colors": {
    "base": {
      "value": "#f5bdbb",
      "type": "color"
    },
    "border": {
      "value": "#df2b2b",
      "type": "color"
    },
    "text": {
      "value": "#c62a21",
      "type": "color"
    }
  },
  "Info Colors": {
    "base": {
      "value": "#c4edfd",
      "type": "color"
    },
    "border": {
      "value": "#205694",
      "type": "color"
    },
    "text": {
      "value": "#205694",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#434547",
      "type": "color"
    },
    "border-strong": {
      "value": "#919192",
      "type": "color"
    },
    "scrim": {
      "value": "#007f9b",
      "type": "color"
    },
    "shadow": {
      "value": "#007f9b",
      "type": "color"
    },
    "text": {
      "value": "#a8a29e",
      "type": "color"
    },
    "text-strong": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "Success Colors": {
    "base": {
      "value": "#e3f0c4",
      "type": "color"
    },
    "border": {
      "value": "#3d741f",
      "type": "color"
    },
    "text": {
      "value": "#467b28",
      "type": "color"
    }
  },
  "Warning Colors": {
    "base": {
      "value": "#fbefba",
      "type": "color"
    },
    "border": {
      "value": "#966220",
      "type": "color"
    },
    "text": {
      "value": "#966220",
      "type": "color"
    }
  }
}
}

Stand Alone Colors

Below are standalone color definitions we use.

.border

.border strong

.text

.text strong

.shadow

.scrim

$inherited.colors.custom.one

dark:

#434547

light:

#434547

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#434547

light:

#434547

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#919192

light:

#919192

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#919192

light:

#919192

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#a8a29e

light:

#a8a29e

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#a8a29e

light:

#a8a29e

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#007f9b

light:

#007f9b

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#007f9b

light:

#007f9b

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#007f9b

light:

#007f9b

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#007f9b

light:

#007f9b

we use

$inherited.colors.custom.six

for

custom six

Background Colors

Below are background color definitions we use.

.base

.step-1

.step-2

.overlay

.code

$inherited.colors.custom.one

dark:

#18181b

light:

#18181b

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#18181b

light:

#18181b

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#141414

light:

#141414

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#141414

light:

#141414

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#585656

light:

#585656

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#585656

light:

#585656

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

rgba(0, 0, 0, 0.8)

light:

rgba(0, 0, 0, 0.8)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

rgba(0, 0, 0, 0.8)

light:

rgba(0, 0, 0, 0.8)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#2B303B

light:

#2B303B

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#2B303B

light:

#2B303B

we use

$inherited.colors.custom.five

for

custom five

CTA Primary Colors

Below are cta primary color definitions we use.

.base

.hover

.pressed

.disabled

.focused

.border

.text

$inherited.colors.custom.one

dark:

#2dd4bf

light:

#2dd4bf

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#2dd4bf

light:

#2dd4bf

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#2c9f90

light:

#2c9f90

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#2c9f90

light:

#2c9f90

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#2cc9b5

light:

#2cc9b5

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#2cc9b5

light:

#2cc9b5

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

rgba(44, 201, 181, 0.1)

light:

rgba(44, 201, 181, 0.1)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

rgba(44, 201, 181, 0.1)

light:

rgba(44, 201, 181, 0.1)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#2cbfac

light:

#2cbfac

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#2cbfac

light:

#2cbfac

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#2b8074

light:

#2b8074

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#2b8074

light:

#2b8074

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.seven

dark:

#feffff

light:

#feffff

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.seven

dark:

#feffff

light:

#feffff

we use

$inherited.colors.custom.seven

for

custom seven

CTA Secondary Colors

Below are cta secondary color definitions we use.

.base

.hover

.pressed

.disabled

.focused

.border

.text

$inherited.colors.custom.one

dark:

#4fb2df

light:

#4fb2df

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#4fb2df

light:

#4fb2df

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#40afe1

light:

#40afe1

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#40afe1

light:

#40afe1

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#4fb2df

light:

#4fb2df

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#4fb2df

light:

#4fb2df

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

rgba(79, 178, 223, 0.1)

light:

rgba(79, 178, 223, 0.1)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

rgba(79, 178, 223, 0.1)

light:

rgba(79, 178, 223, 0.1)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#4fb1df

light:

#4fb1df

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#4fb1df

light:

#4fb1df

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#209fdb

light:

#209fdb

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#209fdb

light:

#209fdb

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.seven

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.seven

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.seven

for

custom seven

CTA Tertiary Colors

Below are cta tertiary color definitions we use.

.base

.hover

.pressed

.disabled

.focused

.border

.text

$inherited.colors.custom.one

dark:

#556375

light:

#556375

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#556375

light:

#556375

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#c7cbd1

light:

#c7cbd1

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#c7cbd1

light:

#c7cbd1

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#3b4047

light:

#3b4047

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#3b4047

light:

#3b4047

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

rgba(85, 99, 117, 0.1)

light:

rgba(85, 99, 117, 0.1)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

rgba(85, 99, 117, 0.1)

light:

rgba(85, 99, 117, 0.1)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#e0e2e6

light:

#e0e2e6

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#e0e2e6

light:

#e0e2e6

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#e2e4e7

light:

#e2e4e7

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#e2e4e7

light:

#e2e4e7

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.seven

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.seven

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.seven

for

custom seven

CTA Danger Colors

Below are cta danger color definitions we use.

.base

.hover

.pressed

.disabled

.focused

.border

.text

$inherited.colors.custom.one

dark:

#1C1B1F

light:

#1C1B1F

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#1C1B1F

light:

#1C1B1F

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#1C1B1F

light:

#1C1B1F

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#1C1B1F

light:

#1C1B1F

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#1C1B1F

light:

#1C1B1F

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#1C1B1F

light:

#1C1B1F

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

#1C1B1F

light:

#1C1B1F

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

#1C1B1F

light:

#1C1B1F

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#1C1B1F

light:

#1C1B1F

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#1C1B1F

light:

#1C1B1F

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#1C1B1F

light:

#1C1B1F

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#1C1B1F

light:

#1C1B1F

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.seven

dark:

#1C1B1F

light:

#1C1B1F

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.seven

dark:

#1C1B1F

light:

#1C1B1F

we use

$inherited.colors.custom.seven

for

custom seven

Accent Colors

Below are accent color definitions we use.

.primary

.secondary

.tertiary

$inherited.colors.custom.one

dark:

#2dd4bf

light:

#2dd4bf

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#2dd4bf

light:

#2dd4bf

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#4fb2df

light:

#4fb2df

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#4fb2df

light:

#4fb2df

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#c5cbd7

light:

#c5cbd7

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#c5cbd7

light:

#c5cbd7

we use

$inherited.colors.custom.three

for

custom three

Error Colors

Below are error colors definitions we use.

.base

.text

.border

$inherited.colors.custom.one

dark:

#f5bdbb

light:

#f5bdbb

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#f5bdbb

light:

#f5bdbb

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#c62a21

light:

#c62a21

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#c62a21

light:

#c62a21

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#df2b2b

light:

#df2b2b

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#df2b2b

light:

#df2b2b

we use

$inherited.colors.custom.three

for

custom three

Success Colors

Below are success colors definitions we use.

.base

.text

.border

$inherited.colors.custom.one

dark:

#e3f0c4

light:

#e3f0c4

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#e3f0c4

light:

#e3f0c4

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#467b28

light:

#467b28

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#467b28

light:

#467b28

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#3d741f

light:

#3d741f

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#3d741f

light:

#3d741f

we use

$inherited.colors.custom.three

for

custom three

Info Colors

Below are info colors definitions we use.

.base

.text

.border

$inherited.colors.custom.one

dark:

#c4edfd

light:

#c4edfd

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#c4edfd

light:

#c4edfd

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#205694

light:

#205694

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#205694

light:

#205694

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#205694

light:

#205694

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#205694

light:

#205694

we use

$inherited.colors.custom.three

for

custom three

Warning Colors

Below are warning color definitions we use.

.base

.text

.border

$inherited.colors.custom.one

dark:

#fbefba

light:

#fbefba

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#fbefba

light:

#fbefba

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#966220

light:

#966220

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#966220

light:

#966220

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#966220

light:

#966220

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#966220

light:

#966220

we use

$inherited.colors.custom.three

for

custom three

Custom Colors

Below are custom color definitions we use.

.one

.two

.three

.four

.five

.six

.seven

.eight

.nine

.ten

$inherited.colors.custom.one

dark:

#ed753a

light:

#ed753a

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#ed753a

light:

#ed753a

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#f3db5f

light:

#f3db5f

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#f3db5f

light:

#f3db5f

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#8fdcf8

light:

#8fdcf8

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#8fdcf8

light:

#8fdcf8

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

#7a65c7

light:

#7a65c7

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

#7a65c7

light:

#7a65c7

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#eb57be

light:

#eb57be

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#eb57be

light:

#eb57be

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#ef8dd6

light:

#ef8dd6

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#ef8dd6

light:

#ef8dd6

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.seven

dark:

#7564be

light:

#7564be

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.seven

dark:

#7564be

light:

#7564be

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.eight

dark:

#d554b3

light:

#d554b3

we use

$inherited.colors.custom.eight

for

custom eight

$inherited.colors.custom.eight

dark:

#d554b3

light:

#d554b3

we use

$inherited.colors.custom.eight

for

custom eight

$inherited.colors.custom.nine

dark:

#ec8943

light:

#ec8943

we use

$inherited.colors.custom.nine

for

custom nine

$inherited.colors.custom.nine

dark:

#ec8943

light:

#ec8943

we use

$inherited.colors.custom.nine

for

custom nine

$inherited.colors.custom.ten

dark:

#da7a4a

light:

#da7a4a

we use

$inherited.colors.custom.ten

for

custom ten

$inherited.colors.custom.ten

dark:

#da7a4a

light:

#da7a4a

we use

$inherited.colors.custom.ten

for

custom ten